<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
>

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>普惠商城-个人中心-订单中心-线上订单-订单付款</title>
	<link rel="stylesheet" href="css/common.css">
	<!-- 个人中心通用样式personal.css -->
	<link rel="stylesheet" href="css/personal.css">
	<link rel="stylesheet" href="css/personal-order-online-pay.css">
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<style type="text/css">
		/*支付弹窗提示*/
		.pay_comfirm{
			width: 800px!important;
			height:300px;
		}
		.pay_comfirm p{
			width: 500px;
			hight:auto;
			margin:20px auto;


		}
		.pay_comfirm p:first-child{
			width:780px;
			height:50px;
			line-height: 50px;
			color:#fff;
			text-align: left;
			padding-left: 20px;
			font-size: 18px;
			background: #cd5041;
			margin-top: 0;
		}

		.confirm_txt{

			background: url(images/pay_comfirm_1.png) center left no-repeat;
			background-size: 70px 70px;
			padding-left: 80px;
			display: block;
			width:300px;
			height:100px;
			margin-left: 20px;
			font-size: 16px;
			line-height: 100px;
		}
		.successful,.failure{
			cursor: pointer;
			width:200px;
			height:50px;
			border-radius: 6px;
			border:none;
			font-size: 18px;

		}
		.successful{
			margin-right: 100px;

			background-color: chartreuse;
		}
		.failure{
			background-color:#cd5041 ;
		}
	</style>
</head>
<body>
	
	<!-- 顶部导航条开始 -->
	<div class="puhuishopping_common_titlelink" id="puhuishopping_common_titlelink">
		<!-- 导航条左部 -->
		<div class="centerbody">
			<div class="title_left">
				<a href="普惠商城-商城首页.html" class="puhuishopping_common_city" id="puhuishopping_common_city">返回普惠商城首页</a>
				<!-- <div class='citylist' id='citylist'></div> -->
			</div>	
		<!-- 导航条右部 -->
			<div class="title_right">
				您好&nbsp;&nbsp;,&nbsp;<a href="普惠商城-商城首页-登录页面.html" class="puhuishopping_common_login" id="puhuishopping_common_login">请登录</a>
				<a href="普惠商城-商城首页-注册页面.html" class="puhuishopping_common_hyzc">会员注册</a>
				<a href="普惠商城-个人中心-订单中心-线上订单.html" class="puhuishopping_common_wddd">我的订单</a>
				<a href="javascript:void(0);" class="puhuishopping_common_ydsc">移动商城</a>
				<div style="clear: both"></div>
			</div>
			<!-- 未登录 -->
			<!-- 	<div class="title_right">
                    您好&nbsp;&nbsp;,&nbsp;<a href="普惠商城-个人中心.html" class="puhuishopping_common_login" id="puhuishopping_common_login">普惠会员</a>
                    <a href="#" class="puhuishopping_common_hyzc">[退出]</a>
                    <a href="普惠商城-个人中心-订单中心-线上订单.html" class="puhuishopping_common_wddd">我的订单</a>
                    <a href="javascript:void(0);" class="puhuishopping_common_ydsc">移动商城</a>
                    <div style="clear: both"></div>
                </div> -->
		</div>	
	</div>
	<!-- 顶部导航条结束 -->
	<!-- 顶部搜索栏部分开始 -->
	<div class="personal_box_tit">
		<div class="centerbody">
			<img src="images/普惠logo最终版白色.png" alt="" class="logo3">
			<a href="普惠商城-个人中心.html" class="personal_box_tit_link">会员首页</a>
			<a href="普惠商城-个人中心-资产中心-我的积分.html" class="personal_box_tit_link">我的积分</a>
			<div class="my_shoplist_box">
				<input type="button" class="my_shoplist" id="my_shoplist" value="我的购物车">
				<img src="images/0.png" alt="" class="num_ico">	
			</div>
			<div class="searchbox">
				<input type="text" class="searchtxt" placeholder="请输入搜索的内容"><input type="button" class="searchbtn" value="搜索">
			</div>
		
			<div style="clear: both"></div>
		</div>
	</div>
	<!--个人中心中间主体框架  -->
	<div class="centerbody personal_middle">
		<!-- 左侧通用导航栏 -->
<!-- 		<div class="personal_middle_nav">
			<ul>
				<li>账户设置</li>
				<li><a href="普惠商城-个人中心_帐户设置_个人信息.html">个人信息</a></li>
				<li><a href="普惠商城-个人中心-账户设置-收货地址.html">收货地址</a></li>
				<li><a href="普惠商城-个人中心-账户设置-账户安全.html">账户安全</a></li>
				<li><a href="javascript:void(0);">我的银行卡</a></li>
			</ul>
			<ul>
				<li>资产中心</li>
				<li><a href="javascript:void(0);">我的余额</a></li>
				<li><a href="javascript:void(0);">我的积分</a></li>
			</ul>
			<ul>
				<li>订单中心</li>
				<li><a href="普惠商城-个人中心-订单中心-线上订单.html" class="linked">线上订单</a></li>
				<li><a href="普惠商城-个人中心-订单中心-线下订单.html">线下订单</a></li>
			</ul>
			<ul>
				<li>推广中心</li>
				<li><a href="javascript:void(0);">我是推荐人</a></li>
				<li><a href="javascript:void(0);">我是推广师</a></li>
			</ul>
		</div>
		 -->
		<div class="centerbody personal_middle_main">
			<div class="pay_status" >
				<p>订单已经提交成功，请尽快支付哦~</p>
				<p>共1个订单，订单号：1234567890，查看<a href="普惠商城-个人中心-订单中心-线上订单-订单详情.html">订单详情</a>。</p>
				<p>应付金额：<span>¥10000.00</span></p>
			</div>
			<div class="at_once_pay">
				<div class="pay_tit">立即支付</div>
				<div class="pay_choose">
						<ul>
						<li>
							<div>
								<input type="radio" name="choose_info" class="choose_info selected"><span class="choose_name">余额支付</span><span class="choose_num">可用余额：</span><span>¥100.00</span>
							</div>
						</li>
						<li>
							<div>
								<input type="radio" name="choose_info" class="choose_info"><span class="choose_name">余额支付</span><span class="choose_num">可用积分：</span><span>10000</span>
							</div>
						</li>
						
					</ul>	
				</div>
				<div class="pay_pass">
					<p>
						<label for="pay_pass_pass">支付密码：</label>
						<input type="password" class='pay_pass_pass' id="pay_pass_pass" placeholder="请输入六位数支付密码">
						<a href="普惠商城-商城首页-登录页面-找回密码.html" class="pay_pass_forget">忘记密码？</a>
					</p>
					<p><input type="button" class="pay_pass_btn" value="立即支付"></p>
				</div>
			</div>
			<!--第三方支付调整为a标签，不可点击状态设置为unable控制-->
			<div class="third_party_pay">
				<div class="pay_tit">第三方支付</div>
				<div class="pay_third">
					<a href="#" class="third_btn unable" >支付宝支付</a>
					<a href="#" class="third_btn unable" >微信支付</a>
					<a href="#" class="third_btn unable" >易联支付</a>
				</div>

			</div>

			<!-- 全部订单 -->
			
		</div>
		<div style="clear:both;"></div>
	</div>
	
<!-- 页面底部 -->
	<div class="foot-banner" style="margin-top: 0;">
		<div class="mod_help_list">
			<div class="mod_help_nav">
				<span class="mod_help_nav_tit">帮助中心</span>
					<ul class="mod_help_nav_con">
						<li><a href="javascript:void(0);" target="_blank" clstag="">购物中心</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">配送中心</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">支付中心</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">常见问题</a></li>
					</ul>
			</div>
			<div class="mod_help_nav">
				<span class="mod_help_nav_tit">售后服务</span>
					<ul class="mod_help_nav_con">
						<li><a href="javascript:void(0);" target="_blank" clstag="">退换货政策</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">退换货流程</a></li>
					</ul>
			</div>
			<div class="mod_help_nav">
				<span class="mod_help_nav_tit">关于我们</span>
					<ul class="mod_help_nav_con">
						<li><a href="javascript:void(0);" target="_blank" clstag="">公司介绍</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">普惠商城简介</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">联系客服</a></li>
					</ul>
			</div>
			<div class="mod_help_nav">
				<span class="mod_help_nav_tit">支付方式</span>
					<ul class="mod_help_nav_con">
						<li><a href="javascript:void(0);" target="_blank" clstag="">微信支付</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">支付宝支付</a></li>

					</ul>
			</div>
		</div>	
		<div class="copyright">
			<p>©2016北京普惠联盟商贸有限公司 puhui315.com 京ICP证070791号|京ICP备10211739号|电子公告服务规则</p>
			<p>电子商务经营许可证(京)字第03889号</p>
			<p>京公网安备11010502025545号</p>
			<p style="height: 34px;width:350px;margin:17px auto 25px">
			<a href="javascript:void(0);" class="outlink link-space"><img src="images/foot-1.png" alt=""></a>
			<a href="javascript:void(0);" class="outlink link-space"><img src="images/foot-2.png" alt=""></a>
			<a href="javascript:void(0);" class="outlink"><img src="images/foot-3.png" alt=""></a>
			</p>
		</div>

	</div>
	<!--弹窗层-->
	<div class="shadow"></div>
	<div class="login_box_2 pay_comfirm" style="background: #fff;">
		<p>支付提示</p>
		<p class="confirm_txt">请您在新打开的支付页面进行支付，支付完成前请不要关闭窗口</p>
		<p><input type="button" class="successful" value="支付成功"><input type="button" class="failure" value="支付遇到问题"></p>
	</div>



</body>
<script th:inline="javascript">
$(function(){
	$(".box1 input:checked").parent().parent().addClass("selected");
	$(".box1 input").change(function(){
        $(".box1 input:checked").parent().parent().addClass("selected").siblings().removeClass("selected");
    });
   		$('input.paybutton').eq(0).addClass('choose');
   		
   		$('input.paybutton').hover(function(){
   			$(this).addClass('choose');
   			$(this).siblings().removeClass('choose');
   		},function(){
   			$(this).removeClass('choose');
   		})
    	$('.cancel_small').click(function(){
			$('.shadow').css('display','none');
			$('.login_box_2').css('display','none');
		})
    	$('.cancel_small').click(function(){
			$('.shadow').css('display','none');
			$('.login_box_2').css('display','none');
		})
    	$('.successful').click(function(){
			$('.shadow').css('display','none');
			$('.login_box_2').css('display','none');
   		 })
		$('.add_info').click(function(){
			$('.shadow').css('display','block');
			$('.login_box_2').css('display','block');
		})
		$('.third_btn').click(function(){
			$('.shadow').css('display','block');
            $('.shadow').css('zIndex','10000');
			$('.pay_comfirm').css('display','block');
            $('.pay_comfirm').css('zIndex','10001');

		})

		$('.shadow').css('height',$(window).height());
			$('.login_box_2').css('top',($(window).height()-$('.login_box_2').height())/2);
			$('.login_box_2').css('left',($(window).width()-$('.login_box_2').width())/2);
		$(window).resize(function(){
			$('.shadow').css('height',$(window).height());
			$('.login_box_2').css('top',($(window).height()-$('.login_box_2').height())/2);
			$('.login_box_2').css('left',($(window).width()-$('.login_box_2').width())/2);
		})
		 $("#hear li").click(function(){
    $(this).css({
         borderBottom: "2px solid red",
         height:"43px"
    }).siblings().css({
        borderBottom: "none",
        height:"45px"
    });
});                
                         
$("#hear li").click(function(){
        $(this).addClass("action").siblings().removeClass("action");
        var index = $(this).index();
        $("#contentop li").eq(index).css("display","block").siblings().css("display","none");
        });
})

	</script>


</html>